

<template>
  <div class="page-wrapper">
    <div class="header-wrapper">
      <h2 class="top">
        <van-icon class="back-icon" @click="fanhui" name="arrow-left" size="30px" />
        <span class="title-text">服务详情</span>
      </h2>
    </div>
    <div class="yuan">
      <van-icon name="clock" size="80px" color="#FDDB78"/>
    </div>
    <h2 style="text-align: center">医生审核中</h2>
    <div class="tuan-dui">
      <div class="tu-pian">
        <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.YhdOuoXmIUGUBSRSDLGXrwHaHa?rs=1&pid=ImgDetMain" alt="文章图片" />
      </div>
      <!--    团队-->
      <div class="tuan-dui-text">
        <span class="tuan-dui-text-title">{{doctor.doctorName}}</span>&emsp;<span class="jigo">{{doctor.position}}</span><br><br>
        <span class="jigo">所属机构：{{doctorTeam.teamName}}</span><br><br>
        <span class="jigo">签约人数：{{doctor.signUpCount}}</span><br><br>
        <span class="jigo">服务次数：</span>
        <span class="ping-fen">{{doctorTeam.signUpCount}}</span>
      </div>
    </div>
    <div class="tuan-dui1">
      <ul class="service-order-list">
        <li>
          <span class="label">服务单号</span>
          <span class="value">{{ tableData.serviceNumber }}</span>
        </li>
        <li>
          <span class="label">申请人</span>
          <span class="value">{{ tableData.realName }}</span>
        </li>
        <li>
          <span class="label">服务包</span>
          <span class="value">{{ tableData.servicePackageName }}</span>
        </li>
        <li>
          <span class="label">服务项目</span>
          <span class="value">{{ tableData.serviceItem }}</span>
        </li>
        <li>
          <span class="label">服务地点</span>
          <span class="value">{{ tableData.serviceLocation }}</span>
        </li>
        <li>
          <span class="label">服务时间</span>
          <span class="value">{{ tableData.serviceTime }}</span>
        </li>
        <li>
          <span class="label">备注</span>
          <span class="value">{{ tableData.note }}</span>
        </li>
        <li>
          <span class="label">提交时间</span>
          <span class="value">{{ tableData.applyTime }}</span>
        </li>
      </ul>
    </div>
    <van-address-list
        add-button-text="取消预约"
        @add="open"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      serviceNumber:'',
      tableData: {},
      doctor:'',
      doctorTeam:''
    };
  },
  created() {
    const token = JSON.parse(localStorage.getItem("token"));
    if (!token) {
      this.$message.error('请先登录');
      setTimeout(() => {
        this.$router.push({name: 'login'});
      });
    }
    // 设置全局默认请求头
    this.axios.defaults.headers.common['token'] = token;
    this.serviceNumber = this.$route.query.serviceNumber
    this.findAll()
    this.doctor =  JSON.parse(localStorage.getItem("doctor"))
    this.doctorTeam = JSON.parse(localStorage.getItem("doctorTeam"))
  },
  methods: {
    fanhui(){
      this.$router.push('/result');
    },
    open() {
      this.$confirm('是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.post(`http://localhost:10086/api/service/service_application/del/${this.tableData.id}`).then(res=>{
          if (res.data.code !== 200){
            this.$message.error('取消失败');
          }else {
            this.$message.success('取消成功');
            setTimeout(() => {
              this.$router.push('/followService');
            });
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    findAll(){
      this.axios.get(`http://localhost:10086/api/service/service_application/findById/${this.serviceNumber}`).then(res=>{
        if (res.data.code !== 200){
          this.$message.error('获取服务详情失败');
        }else {
          this.tableData = res.data.data
        }
      })
    }
  },

};
</script>
<style scoped>
.service-order-list {
  list-style: none;
  padding: 0;
}

.service-order-list li {
  margin-bottom: 20px;
  margin-left: 20px;

}

.label {
  display: inline-block;
  width: 100px;
  font-weight: bold;
}
.yuan{
  width: 100%;
  height: 80px;
  margin-top: 30px;
  text-align: center;
}
.page-wrapper {
  min-height: 100vh;
  background-color: #F5F9FD;
}

.header-wrapper {
  background-color: white;
}

.top {
  display: flex;
  align-items: center;
  height: 50px;
  position: relative;
}

.back-icon {
  position: absolute;
  left: 10px;
}

.title-text {
  width: 100%;
  text-align: center;
}


.article-text p {
  font-size: 12px;
  color: gray;
}


.tu-pian img {
  width: 150px;
  height: 150px;
  float: left;
  border-radius: 30px;
  box-shadow: 0 0 10px rgba(0, 128, 255, 0.2);
}


.page-wrapper {
  min-height: 100vh;
  background-color: #F5F9FD;
}

.header-wrapper {
  background-color: white;
}

.top {
  display: flex;
  align-items: center;
  height: 50px;
  position: relative;
}

.back-icon {
  position: absolute;
  left: 10px;
}

.title-text {
  width: 100%;
  text-align: center;
}

img {
  //background-color: red;
  width: 100%;
  height: 100%;
}


.tu-pian1 img{
  width: 80px;
  height: 80px;
  border-radius: 20px;
}

.ping-fen{
  margin-left: 10px;
  color: #2984F8;
  font-size: 18px;
}
.jigo{
  color: dimgrey;
}
.tuan-dui-text{
  width: 200px;
  height: 100px;
  float: left;
  margin-left: 10px;
  margin-top: 10px;
}
.tuan-dui-text-title{
  font-size: 20px;
  color: black;
}
.tu-pian{
  width: 150px;
  height: 150px;
  float: left;
  margin-left: 10px;
  margin-top: 10px;
}
.tu-pian img{
  width: 150px;
  height: 150px;
  float: left;
  border-radius: 30px;
  box-shadow: 0 0 10px rgba(0, 128, 255, 0.2);
}
.tuan-dui{
  width: 100%;
  height: 180px;
  background-color: white;
}
.tuan-dui1{
  width: 100%;
  height: auto;
  background-color: white;
  padding: 10px 0px;
}
.page-wrapper {
  min-height: 100vh;
  background-color: #F5F9FD;
}

.header-wrapper {
  background-color: white;
}

.top {
  display: flex;
  align-items: center;
  height: 50px;
  position: relative;
}

.back-icon {
  position: absolute;
  left: 10px;
}

.title-text {
  width: 100%;
  text-align: center;
}

img {
  //background-color: red;
  width: 100%;
  height: 100%;
}
</style>